<template lang="pug">
.flex
  view
    .list-btn(v-for="(item,i) in list" :key='item.id' @click="listClick(i)"
    :class="{'selected':(selected==item.id)}") 
      .content {{item.name}}
  .list-row
    .w-full.grid.grid-cols-2.gap-2
      .goods-card(v-for="item in goods" :key="'sub'+item.id" @click="toDetail(item)")
        view.mb-2(class="h-[20vw] w-[23vw]")
          image.w-full.h-full(:src="item.pic" mode="aspectFit")
        .title {{item.name}}
</template>
<script setup  lang="ts">
import { getProductType } from "@/api/common";
import qs from 'qs'
const selected = ref('')
const list = ref<any[]>([])
const goods = ref([]);
onLoad(op=>{
  getProducts();
})
async function getProducts(){
  uni.showLoading();
  const res = await getProductType();
  list.value = res.rows;
  uni.hideLoading();
  selected.value = list.value[0].id
  goods.value = list.value[0].sub;
}
function  listClick(i) {
  selected.value = list.value[i].id;
  goods.value = list.value[i].sub;
}
function toDetail(item,upper){
  let query = {
    id:item.id,
    name:item.name,
    productTypeCode:list.value.find(el=>el.id==selected.value)?.code,
    productCode:item.code
  }

  uni.navigateTo({
    url:`/pages/forms/index?${qs.stringify(query)}`
  })
}
</script>
<style scoped lang="scss">
 page{
  @apply bg-[#F8F9F3];
}
.list-btn{
  @apply w-[25vw] py-4 text-xs text-gray-700 border-transparent;
    .content{
      @apply py-0 text-center  w-full;
      border-left: 4px solid transparent;

    }

  &.selected{
    .content {
      @apply border-prim text-prim font-semibold;
      border-left: 4px solid;
    }
  }
}
.goods-card{
  @apply rounded-md bg-white flex flex-col items-center justify-between p-3 shadow-sm ;
  .title{
    @apply px-4 text-sm text-prim
  }
}
.list-row{
  @apply  flex-1 pt-4 pr-4  overflow-y-auto h-[100vh];
}
</style>